<template>
	<scroll-view scroll-y="true" class="container_scrollview" :show-scrollbar="false">
		<view class="container">
			<view class="kuang2">
				<view class="tab">
					<view :class="tabshow?'tabson tabshow':'tabson'" @click="tabbtn('jd')">
						门店自提
					</view>
					<view :class="!tabshow?'tabson tabshow':'tabson'" @click="tabbtn('zdf')">
						门店配送
					</view>
				</view>
				<view class="tabbox" v-if="tabshow">
					<view class="title">
						蜜雪冰城(丁家庄店)
					</view>
					<view class="address">
						门店地址:南京市栖霞区尧化街道100号，报取件码取餐
					</view>
					<!-- 	<view class="btnmax" @click="sousuo">
						<u-button text="查找" class="custom-style" @click="dialPhone" shape="circle"
							:customStyle="{fontSize: '36rpx',color: '#fff',margin:'0'}" color="#2B70FC"></u-button>
					</view> -->
				</view>
				<view class="tabbox" v-else>
					<view class="title">
						蜜雪冰城(丁家庄店)
					</view>
					<view class="address">
						配送地址:南京市栖霞区尧化街道100号 杨先生 18455050327
					</view>
				</view>
			</view>
			<view class="kuang3 fl_ju" v-if="tabshow">
				<view class="yuji">
					预计取餐时间
				</view>
				<view class="time">
					13:45
				</view>
			</view>
			<view class="kuang3 fl_ju" v-else>
				<view class="yuji">
					预计送达时间
				</view>
				<view class="time fl_al">
					13:45 <image src="../../static/signImages/right.png" mode=""></image>
				</view>
			</view>
			<view class="kuang3">
				<view class="title">
					蜜雪冰城(丁家庄店)
				</view>
				<view class="fl_ju spson">
					<view class="flleft fl_al">
						<image src="../../static/signImages/tx.png" mode=""></image>
						<view class="xinxi">
							<view class="name">
								土豆泥
							</view>
							<view class="shu">
								x1
							</view>
						</view>
					</view>
					<view class="flright">
						¥18.00
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">
						商品小计:
					</view>
					<view class="flright">
						¥18.00
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">
						包装费用:
					</view>
					<view class="flright">
						¥18.00
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">
						优惠券:
					</view>
					<view class="tishi">
						暂无可用优惠券
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">

					</view>
					<view class="flright">
						<text class="tishi">共1件商品，小计</text>¥18.00
					</view>
				</view>
			</view>
			<view class="kuang3 fl_al">
				<view class="yuji">
					备注：
				</view>
				<view class="">
					<u--input placeholder="请输入备注内容" :border="false" v-model="value" @change="change"></u--input>
				</view>
			</view>
		</view>
		<view class="fl_ju xuanfu">
			<view class="qian">
				¥<text style="font-size: 30rpx;font-weight: 600;">18.00</text>
			</view>
			<view class="" style="width: 200rpx;">
				<u-button text="提交" color="#3AA3FF"></u-button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				tabshow: false,
				value: ''
			};
		},
		computed: {
			isAuthentication() {
				return this.$store.state.modules.isAuthentication;
			},
			// bindLength() {
			//   return this.$store.state.modules.bindLength;
			// },
			isBind() {
				return this.$store.state.modules.isBind;
			},
			dynamicProcessLine() {
				return "container-processs-line";
			},
			nickName() {
				if (this.$store.state.modules.token) {
					return "苏小租";
				} else {
					return "未登录";
				}
			},
			avatarUrl() {
				if (this.$store.state.modules.avatarUrl) {
					return this.$store.state.modules.avatarUrl;
				} else {
					return BASE_URL.IMAGE_URL + "/headimg.png";
				}
			},
		},
		onShow() {
			if (this.$store.state.modules.isAuthentication) {
				// 判断是否绑定企业
				this.findUserItemsFun();
			}
		},
		onLoad() {
			let systemInfo = uni.getMenuButtonBoundingClientRect();
			this.imgHeight = systemInfo.height + systemInfo.top + 5;
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			tabbtn(e) {
				if (e == 'jd') {
					this.tabshow = true
				} else {
					this.tabshow = false
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.xuanfu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.qian{
			color: #FF0000;
		}
	}

	.tishi {
		color: #9C9C9C;
		font-size: 24rpx;
	}

	.spson {
		margin: 10rpx 0;
		padding: 10rpx 0;
		box-sizing: border-box;
		border-top: 1px solid #EBEBEB;

		.flleft {
			.name {
				font-weight: 600;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}

			.shu {
				font-size: 24rpx;
				color: #c5c5c5;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
		}

		.flright {}
	}

	.time {
		color: #9C9C9C;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}

	.kuang3 {
		border-radius: 24rpx;
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		width: 95%;
		margin: 30rpx auto;
		box-shadow: 5px 5px 10px 1px #EBEBEB;
		position: relative;
	}

	.type {
		color: #FF0000;
		font-size: 30rpx;
	}

	.title {
		color: #090909;
		font-size: 30rpx;
		margin: 15rpx 0;
	}

	.address {
		color: #9C9C9C;
		font-size: 30rpx;
	}

	.kuang2 {
		border-radius: 24rpx;
		background-color: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		width: 95%;
		margin: 20rpx auto;
		box-shadow: 5px 5px 10px 1px #EBEBEB;
		position: relative;
	}

	.tab {
		background-color: #F3F3F3;
		display: flex;
		align-items: center;
		text-align: center;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;

		.tabson {
			width: 50%;
			font-size: 32rpx;
			color: #333333;
			padding: 22rpx 0;
			box-sizing: border-box;
			font-weight: 600;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
		}

		.tabshow {
			background-color: #fff;
			color: #296CFB;
			font-weight: 600;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
		}

		// .tabfalse {
		// 	border-bottom-left-radius: 32rpx;
		// }
	}

	.tabbox {
		background-color: #fff;
		width: 100%;
		padding: 0rpx 24rpx 32rpx 24rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
	}
</style>